<!DOCTYPE html>
<html>
<head>
    <div th:include="base-libs :: base-libs"/>
    <title>管理机构服务项</title>
    <meta name="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">
        #btnTool button{
            float: right;
            margin-right: 10px;
        }
    </style>

    <script>
        $(function () {
            initView();
            initData();
            $("#btnQuery").trigger("click");
        })

        function initData() {
            var ary = StoreCache.removeCache("curr_xymb_selected_fwxx");
            $("#dgSelectedFwx").datagrid("loadData", ary);
        }

        function initView() {
            $("#dgFwx").datagrid({
                idField : "FWID",
                striped : true,
                fitColumns : true,
                fit : true,
                border : false,
                rownumbers: true,
                singleSelect: true,
                toolbar : "#tb",
                pagination: true,
                loadMsg: "",
                columns : [[
                    {
                        field : "FWMC",
                        width: 6,
                        align: "center",
                        title : "服务项名称"
                    },
                    {
                        field : "FWNR",
                        width: 12,
                        align: "center",
                        title : "服务内容",
                        formatter : function(value, row, index){
                            return "<span title='"+value+"'>"+value+"</span>";
                        }
                    }
                    ,{
                        field : "XZ",
                        width: 3,
                        align: "center",
                        title : "选择",
                        formatter : function(value, row, index){
                            var dgFwxBtn = $("#dgFwxBtn").html();
                            return dgFwxBtn.replace(/FWID/g, row["FWID"]);
                        }
                    }
                ]]
            });
            $("#dgFwx").datagrid("fitColumns");
            $("#dgFwx").datagrid("initPageQuery", {
                url: contextRoot+"/xymb/queryPageSummaryFwxx.service"
                ,getParamsFunc: getFwxxParams
            });
            $("body").on("click", ".dgFwxBtn", function(){
                var FWID = $(this).attr("id");
                $("#dgFwx").datagrid("selectRecord", FWID);
                var item = $("#dgFwx").datagrid("getSelected");

                var index = $("#dgSelectedFwx").datagrid("getRowIndex", FWID);
                if(index>=0){
                    $.QuickAlert.alertNormal("选择的服务项已存在");
                    $("#dgSelectedFwx").datagrid("scrollTo", index);
                    $("#dgSelectedFwx").datagrid("selectRow", index);
                }else{
                    var itemCopy = $.extend({}, item);
                    $("#dgSelectedFwx").datagrid("appendRow", itemCopy);
                }
                $("#dgFwx").datagrid("unselectAll");
            });

            $("#dgSelectedFwx").datagrid({
                idField : "FWID",
                striped : true,
                fitColumns : true,
                fit : true,
                border : false,
                rownumbers: true,
                singleSelect: true,
                loadMsg: "",
                columns : [[
                    {
                        field : "FWMC",
                        width: 6,
                        align: "center",
                        title : "服务项名称"
                    },
                    {
                        field : "FWNR",
                        width: 12,
                        align: "center",
                        title : "服务内容",
                        formatter : function(value, row, index){
                            return "<span title='"+value+"'>"+value+"</span>";
                        }
                    }
                    ,{
                        field : "CZ",
                        width: 3,
                        align: "center",
                        title : "操作",
                        formatter : function(value, row, index){
                            var dgSelectedFwxBtn = $("#dgSelectedFwxBtn").html();
                            return dgSelectedFwxBtn.replace(/FWID/g, row["FWID"]);
                        }
                    }
                ]]
            });
            $("#dgSelectedFwx").datagrid("fitColumns");
            $("body").on("click", ".dgSelectedFwxBtn", function(){
                var FWID = $(this).attr("id");
                $.QuickAlert.alertConfirm({
                    content: "是否移除选中的服务项"
                    ,callback: function(){
                        var index = $("#dgSelectedFwx").datagrid("getRowIndex", FWID);
                        $("#dgSelectedFwx").datagrid("deleteRow", index);
                    }
                });
            });
        }

        /**获取查询服务信息的查询参数*/
        function getFwxxParams(){
            var params = {};
            var FWMC = $("#FWMC").val();
            params["FWMC"] = FWMC;
            params["QYLB"] = "02";
            return params;
        }

        /**查询所有服务项*/
        function btnQueryHandler(){
            $("#dgFwx").datagrid("queryPage");
        }

        /**确定按钮回调*/
        function btnOKHandler(){
            var ary = $("#dgSelectedFwx").datagrid("getRows");
            StoreCache.setCache("curr_xymb_selected_fwxx", ary);
            StoreCache.setCache("curr_xymb_isReset", true);
            parent.layer.closeAll();
        }

        /**取消按钮回调*/
        function btnCancelHandler(){
            $.QuickAlert.alertConfirm({
                content: "将不会保存当前的修改，是否继续取消"
                ,callback: function(){
                    StoreCache.setCache("curr_xymb_isReset", false);
                    parent.layer.closeAll();
                }
            });
        }
    </script>

</head>

<body class="easyui-layout">
    <div region="center" title="服务项列表">
        <div id="tb" style="padding:8px 20px;">
            <form id="queryForm">
                <table>
                    <tr>
                        <td class="query-text">服务项名称</td>
                        <td class="query-content">
                            <input id="FWMC" name="FWMC" class="query-input" style="width: 200px;">
                        </td>
                        <td>
                            <button id="btnQuery" class="btn btn-default" type="button" onclick="btnQueryHandler()">查询</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <table id="dgFwx"></table>
    </div>
    <div region="east" style="width: 50%;" title="已选择的服务项" data-options="split: true, collapsible: false">
        <table id="dgSelectedFwx"></table>
    </div>
    <div id="btnTool" region="south" style="height: 40px; padding: 4px;">
        <button onclick="btnCancelHandler()">取消</button>
        <button onclick="btnOKHandler()">确定</button>
    </div>
</body>
<script type="text/html" id="dgFwxBtn">
    <a class="dgFwxBtn" id=FWID href="javascript:void(0)" title="选择" style="color: #00c297;">选择</a>
</script>
<script type="text/html" id="dgSelectedFwxBtn">
    <a class="dgSelectedFwxBtn" id=FWID href="javascript:void(0)" title="移除" style="color: #00c297;">移除</a>
</script>
</html>
